<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="catalogoList.title"/></title>
    <meta name="heading" content="<fmt:message key='catalogoList.heading'/>"/>    
</head>

<form:form id="catalogoList">

<c:set var="buttons">
    <input type="button" class="button" 
        onclick="location.href='<c:url value="/catalogo/catalogoform.html?method=Add&from=list"/>'"
        value="<fmt:message key="button.agregar"/>"/>
        
    <input type="button" class="button" 
    	onclick="location.href='<c:url value="/mainMenu.html"/>'"
        value="<fmt:message key="button.done"/>"/>
</c:set>

<ul>
	<li>
	<label class="desc"><fmt:message key="common.filtros.busqueda"/></label>
	<div class="group" style="width: 300px">
		<div>
			<label  for="deCatalogoId" class="required desc"><fmt:message key="catalogoList.deCatalogo"/></label>
			<input id="deCatalogoId" name="descripcion" maxlength="30" class="text medium"/>
			 
			<label for="codigoCatalogoId" class="required desc"><fmt:message key="catalogoList.coCodigoCatalogo"/></label>
			<input id="codigoCatalogoId" name="codigoCatalogo" maxlength="14"class="text medium"/><br/>
			
			<label  class="required desc"><fmt:message key="common.tipo.tarjeta"/></label>
	        <select class="text medium" id="clpdTipoTarjetaPersona_id" >
	        	<option value="-1"><fmt:message key="label.itemdefault"/></option>
	        	<c:forEach var="tipoTarjeta" items="${tiposTarjetasPersonas}">
	        		<option value="${tipoTarjeta.id}">${tipoTarjeta.deTipoTarjetaPersona}</option>
	        	</c:forEach>
	       	</select>       
			<br/>
				
			<fmt:message key="cliente.persona.estado.habilitado"/><br/>
			<!--input type="checkbox" id="habilitadoid"  name="habilitado"/><br/-->
			<select id="habilitadoid" name="habilitado" class="text medium">
				<option value="Y"><fmt:message key="common.yes"/></option>
				<option value="N"><fmt:message key="common.no"/></option>
			</select><br/>
			<br/>
	        				
			<input class="button" type="button" onclick="buscarCatalogos()" value="<fmt:message key="button.search"/>"/>
		</div>
		
	</div>	
	</li>
</ul>

<c:out value="${buttons}" escapeXml="false" /><br/><br/>
<table id="catalogos" cellpadding="0" class="table" cellspacing="0" style="width: 900px" > 
	<thead> 
		<tr> 
            <th scope="col"><fmt:message key="catalogoList.deCatalogo"/></th>
            <th scope="col"><fmt:message key="catalogoList.coCodigoCatalogo"/></th>
            <th scope="col"><fmt:message key="catalogoList.tipo.tarjeta"/></th>
            <th scope="col"><fmt:message key="catalogoList.daInicioVigencia"/></th>
            <th scope="col"><fmt:message key="catalogoList.daFinCanje"/></th>
            
		</tr>
	</thead> 
	<tbody id="catalogsbody">
		<tr id="pattern" style="display:none;">
			<td> 
				<span id="tableCatalogo">Catalogo</span>						
			</td>
			<td> 
				<span id="tableCodeCatalogo">Codigo Catalogo</span>						
			</td>
			<td> 
				<span id="tableTipoTarjeta">Tipo Tarjeta</span>						
			</td>
			<td> 
				<span id="tableInicioVigencia">Inicio Vigencia</span>						
			</td>
			
			<td> 
				<span id="tableFinCanje">Fin Canje</span>						
			</td>
		</tr> 	
		<c:forEach var="catalogo" items="${catalogos}" varStatus="status">	
			<c:choose>
				  <c:when test="${status.index % 2 == 0}"><tr class="odd" ></c:when>
				  <c:otherwise><tr class="even" ></c:otherwise>
			</c:choose>
            	<td>
					<a href="<c:url value="/catalogo/catalogoform.html?id=${catalogo.id}&amp;from=list"/>">					
						${catalogo.deCatalogo}
					</a>            	
				</td>
				<td>
                    ${catalogo.coCodigoCatalogo}
                </td>
                <td>
                    ${catalogo.clpdTipoTarjetaPersona.deTipoTarjetaPersona}
                </td>
                <td>
                    <fmt:formatDate pattern="${date_format}" value="${catalogo.daInicioVigencia.time}"/>
                </td>
             
                <td>
                    <fmt:formatDate pattern="${date_format}" value="${catalogo.daFinCanje.time}"/>
                </td>                                
           </tr>
        </c:forEach>				
	</tbody>
</table> 
<input type="hidden" id="date_format" value="${date_format}"/>
<c:out value="${buttons}" escapeXml="false" />
</form:form>
<script type="text/javascript">
	
    function buscarCatalogos()
    {
        var descripcion = dwr.util.getValue("deCatalogoId");
        var codigoCatalogo=dwr.util.getValue("codigoCatalogoId");
        var tipoTarjeta= dwr.util.getValue("clpdTipoTarjetaPersona_id");
        var fechaInicio= "";
        var fechaFin= "";
        var estado= dwr.util.getValue("habilitadoid");
        
        var dateFormat = dwr.util.getValue("date_format");
        
        CatalogoService.busquedaCatalogo(descripcion,codigoCatalogo,tipoTarjeta,fechaInicio,fechaFin,estado, function(data) {
        	
    	    dwr.util.removeAllRows("catalogsbody", { filter:function(tr) {
    	      return (tr.id != "pattern");
    	    }});


    	    if (data.length>0){
        	    
	    	    var catalogo,url;
	    	    for (var i = 0; i < data.length; i++) {
	    	      	catalogo = data[i];
	
	    	      	dwr.util.cloneNode("pattern", { idSuffix:catalogo.id });
	    	      	url = "<a href='/clubpgnweb/catalogo/catalogoform.html?id=" + catalogo.id + "'>" + catalogo.deCatalogo + "</a>";	
	    	      	dwr.util.setValue("tableCatalogo" + catalogo.id, url, { escapeHtml:false });
	
					dwr.util.setValue("tableCodeCatalogo"+ catalogo.id, catalogo.coCodigoCatalogo, { escapeHtml:false });
	
					dwr.util.setValue("tableTipoTarjeta"+ catalogo.id, catalogo.deTipoTarjetaPersona, { escapeHtml:false });
						
	    	      	dwr.util.setValue("tableInicioVigencia" + catalogo.id, catalogo.inicioVigencia,{ escapeHtml:false });
	    	      	
	    	      	dwr.util.setValue("tableFinCanje" + catalogo.id, catalogo.finCanje, { escapeHtml:false });
	
					if(i % 2 == 0){
						$("pattern" + catalogo.id).className = "odd";
					}
					else{
						$("pattern" + catalogo.id).className = "even";
					}
		    	      
		    	    $("pattern" + catalogo.id).style.display = "";
	    	    }
    	    }else{
    	    }
    	    
		});
    }       
</script>
<script type='text/javascript' src="<c:url value="/dwr/interface/CatalogoService.js"/>"></script>